<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
             style="height: 70px;"
              active-text-color="#FFFFCC"
             router
    >
      <el-menu-item index="0" style="margin-left: 150px;margin-right: 20px">
        <template slot="title">
          <img src="../assets/logo.png" style="width: 150px;">
        </template>
      </el-menu-item>
      <el-menu-item index="/home">
        <span style="font-size: 20px"> 首页</span>
      </el-menu-item>
      <el-menu-item index="/article">
        <span style="font-size: 20px"> 旅游分享</span>
      </el-menu-item>
      <el-menu-item index="/scenic">
        <span style="font-size: 20px"> 目的地</span>
      </el-menu-item>





      <el-submenu index="4" style="float: right; margin-right: 200px">
        <template slot="title">
          <el-avatar :size="50" :src="user.avatar" v-show="user.avatar != null"></el-avatar>
          <el-avatar :size="50" src="https://img-qn.51miz.com/Element/00/88/59/99/8de317d3_E885999_245f75fb.png" v-show="user.avatar == null"></el-avatar>
          <span style="margin-right: 6px; margin-left: 15px; font-size: 20px"> {{this.nickName}}</span>
        </template>
        <el-menu-item index="/person">个人中心</el-menu-item>
        <el-menu-item index="/center">内容管理</el-menu-item>
        <el-menu-item index="/login">退出登录</el-menu-item>
      </el-submenu>

      <el-menu-item index="/login" style="float: right; margin-right: 0px" v-show="user.id == 0">
        <a @click="window.location.href('/login')" target="_blank" >
          <span style="font-size: 20px;color: red">登录/注册</span>
        </a>
      </el-menu-item>

    </el-menu>
    <div class="line"></div>
  </div>



</template>

<script>
export default {
  name: "Header",
  data(){
    return {
      nickName: "",
    }
  },
  props: {
    user: Object
  },
  mounted() {
    this.nickName = localStorage.getItem("nickName")
  }
}
</script>

<style scoped>
.el-menu-item.is-active {
  background-color: #FF9D00 !important
}
</style>